<template>
  <div class="termAdd">
    <el-card>
      <h1>添加学期</h1>
      <el-form :model="formTerm" ref="formTerm"  label-position="right" :rules="rules"  label-width="120px">
        <el-form-item label="学期名:" prop="cg_name">
          <el-input v-model="formTerm.cg_name" placeholder="请输入学期名"></el-input>
        </el-form-item>
        <el-form-item label="期数:" prop="cg_periods">
          <el-input v-model="formTerm.cg_periods" placeholder="第几期"></el-input>
        </el-form-item>
        <el-form-item label="开始日期:" required>
          <el-col :span="11">
            <el-date-picker type="date" value-format="yyyy-MM-dd" placeholder="选择开始日期" v-model="formTerm.cg_start_time" style="width: 100%;"></el-date-picker>
          </el-col>
        </el-form-item>
        <el-form-item label="结束日期:" required>
          <el-col :span="11">
            <el-date-picker type="date" value-format="yyyy-MM-dd" placeholder="选择结束日期" v-model="formTerm.cg_end_time" style="width: 100%;"></el-date-picker>
          </el-col>
        </el-form-item>
        <div class="term-content">
         <el-table :data="formTerm.list" stripe empty-text="暂无数据，点击左下角添加" style="width: 100%">
              <el-table-column prop="class_name" label="班级名称" width="120px">
                  <template slot-scope="scope">
                    <el-popover
                      placement="top-start"
                      width="200"
                      trigger="focus"
                      content="只能输入单个大写字母,如(A、B、C、D...)">
                      <el-input v-model.trim="scope.row.class_name" slot="reference"></el-input>
                    </el-popover>
                  </template>
              </el-table-column>
              <el-table-column prop="group_count" label="班级小组数" width="120px">
                  <template slot-scope="scope">
                      <el-input v-model.trim="scope.row.group_count"></el-input>
                  </template>
              </el-table-column>
              <el-table-column prop="del" label=删除 width="70px" >
                  <template slot-scope="scope">
                      <el-button type="text" @click.native.prevent="delete_list(scope.$index, formTerm.list)"><i class="el-icon-delete"></i></el-button>
                  </template>
              </el-table-column>
          </el-table>
          <div class="btn">
            <el-button type="text" @click="addRow(formTerm.list)" class="add_btn"><i class="el-icon-plus"></i></el-button>
          </div>
        </div>
        <el-form-item>
        <el-button type="primary" @click="onSubmit('formTerm')">立即创建</el-button>
        <el-button>取消</el-button>
      </el-form-item>
    </el-form>
    </el-card>
  </div>
</template>

<script>
  import addterm from '@/api/term';
    export default {
        name: "termAdd",
      data(){
        return {
          formTerm: {
            cg_name: '',
            cg_periods: '',
            cg_start_time: '',
            cg_end_time: '',
            list: [{
              class_name: '',
              group_count: ''
            }]
          },
          rules: {
            cg_name: [
              { required: true, message: '请输入学期名称！', trigger: 'blur' }
            ],
            cg_periods: [
              { required: true, message: '请输入第几期！', trigger: 'blur' },
            ],
            class_name: [
              { required: true, message: '请输入班级名！', trigger: 'blur' },
              { min: 1, max: 1, message: '只能输入一个大写英文字母', trigger: 'blur' }
            ]
          }
        }
      },
       mounted(){
       },
      methods: {
        delete_list(index,row) {
          row.splice(index, 1);
        },
        addRow(tableData,event){//添加数据
          this.formTerm.list.push({
            class_name: '',
            group_count: ''
          })
         },
        onSubmit(formName) {
          var that = this;
          var reg = /^[A-Z]+$/;
          var num = /^[0-9]*[1-9][0-9]*$/;
          //获取分班信息
          this.$refs[formName].validate((valid) => {
          if (valid) {
            let length = this.formTerm.list.length
            for(let i=0;i<length;i++){
                this.formTerm.list[i].class_name = this.formTerm.list[i].class_name;
                this.formTerm.list[i].group_count = this.formTerm.list[i].group_count;
                //提交数据前，验证学员个人简历信息不能存在空值
                if(
                  this.formTerm.list[i].class_name == '' ||
                  this.formTerm.list[i].group_count == '' 
                  ){
                  this.$message.error('请输入分班信息！');
                  return false;
                }
                if (!reg.test(this.formTerm.list[i].class_name)) {
                  this.$message.error('班级名称只能是一个大写字母！');
                  return false;
                }
                if (this.formTerm.list[i].class_name.length >= 2) {
                  this.$message.error('班级名称只能是一个大写字母！');
                  return false;
                }
                if (!num.test(this.formTerm.list[i].group_count)) {
                  this.$message.error('请正确输入班级小组数！');
                  return false;
                }
            }
            //获取期数其他信息
            let param = {
              cg_name: this.formTerm.cg_name,
              cg_periods: this.formTerm.cg_periods,
              cg_start_time: this.formTerm.cg_start_time,
              cg_end_time: this.formTerm.cg_end_time,
              list: this.formTerm.list
            }
            var str_1 = param.cg_start_time.toString();
            var str_2 = param.cg_end_time.toString();
            var str_temp_1 = str_1.replace('/-/g', '/');
            var str_temp_2 = str_2.replace('/-/g', '/');
            var Time_1 = new Date(str_temp_1).getTime();
            var Time_2 = new Date(str_temp_2).getTime();
            if (Time_2 <= Time_1) {
              this.$message.error('结束日期不能早于开始日期!');
              return false;
            }
            // console.log(this.formTerm);
            addterm.addTerm(this.formTerm).then(function (resp) {
              if (resp.data.code == '200') {
                that.$message({
                  message: '期数添加成功',
                  type: 'success'
                });
                that.$router.push({path: "/term/termlist"})
              } else {
                 that.$message.error('添加失败，请重试...');
              }
            })
            } else {
              console.log('error submit!!');
              return false;
            }
          });
        },
        resetForm(formName) {
          this.$refs[formName].resetFields();
        }
      },
    }
</script>

<style scoped>
.add_btn{
  display: block;
}
.el-icon-plus{
  font-size: 20px;
}
.el-breadcrumb {
  font-size: 16px;
}
.term-content {
  margin-left: 40px;
}
</style>
<style>
.init-box {
  overflow-y: scroll;
  height: 500px;
}
</style>